<template>

    <input :id="'slider-input-'+id"
    	:data-slider-id="'slider-'+id"
    	data-slider-min="{{min}}"
    	data-slider-max="{{max}}"
    	data-slider-step="{{step}}"
    	data-slider-value="{{dataVal}}"
    	data-slider-orientation="{{orientation}}"
    	data-slider-enabled="{{enable}}"
    	type="text">
</template>

<style lang="sass">
@import "../../public/css/common.scss";
@import "../../public/plugins/bootstrap-slider/bootstrap-slider.min.css";

 .slider {

	&.slider-horizontal{
			/* width: 220px;
		position: absolute;
		left:30px;
		bottom: 0;
		 transform: translateX(-50%);  */
		.slider-track{
			/* height: 4px; */
			.slider-selection{
				background: #00adef;
			}
		}
		.slider-handle {
			background: url("../../public/images/slider-bg.png") no-repeat;
			background-size: cover;
			width: 48px;
			height: 48px;
			top:-15px;
			transform: rotate(90deg);
		}
	}
}
.slider {
    &.slider-vertical{
    width:torem(20px);
		height:10rem;
    .slider-track{
      width:50%;
    }
		.slider-handle {
      background: url("../../public/images/slider-bg.png") no-repeat;
      background-size: cover;
      width: torem(96px);
      height: torem(96px);
      margin-left:torem(-(48px-10px));
      margin-top:torem(-48px);
		}
		.slider-track-high{
			background: #00adef;
		}
	}
}
</style>

<script>
import Slider from '../../public/plugins/bootstrap-slider/bootstrap-slider.js';
import { UUID } from '../../public/common/Common';
export default {

	replace: true,

	props: {
		// id      : '',
		min     : 0,
		max     : 0,
		step    : 1,
		dataVal : 0,
		enable 	:  {
			type: Boolean,
			default: false
		},
		reversed: {
			type: Boolean,
			default: false
		},
		orientation:{
			type:String,
			default:'horizontal'
		},
    sliderShow:{
      type:Boolean,
      default:true
    },
    fullscreen:{
      type:Boolean,
      default:false
    }
	},
	data() {

		return {
			id	   : UUID(15),
			/*val    : this.dataVal,*/
			target : new Object,
      sliderHandler:null,
      sliderDom:null
		}
	},
	watch:{
		'max':function(val){

			this.setAttribute('max',val);
		},
		'min':function(val){

			this.setAttribute('min',val);
		},
		'dataVal':function(val){

			this.setValue(val);
		},
    'sliderShow':function(nval){
      if(this.fullscreen){
        if(nval){
          document.addEventListener('touchstart',this.sliderBodyTouch,false)
        }else{
          document.removeEventListener('touchstart',this.sliderBodyTouch,false)
        }
      }
    }
	},
	methods: {

		start(val,event) {

		},

		stop(val,event) {

		},

		change(val,event) {

		},

		destory(){
			let target = this.$get('target');

			target.destroy();
		},

		/**
		 * 获取控件值
		 * @function
		 * @name getValue
		 * @return 返回值为数字类型
		 */
		getValue() {

			let target = this.$get('target');

			return target.getValue();
		},

		/**
		 * 设定控件值
		 * @function
		 * @name setValue
		 * @param {number} val 值为数字类型
		 */
		setValue(val) {
			//console.log('change-value:',val,typeof val)
			let target = this.$get('target');

			val = Number(val);

			target.setValue(val);
		},
		setAttribute(name,val){

			let target = this.$get('target');

			val = Number(val);

			target.setAttribute(name,val);
		},
		reFresh(){

			let target = this.$get('target');

			target.refresh();
			//回调
			this.reFreshDone();
		},
		reFreshDone(){
			this.reFreshDoneEvent();
		},
		reFreshDoneEvent(n){

		},
    sliderBodyTouch(e){
      if(this.sliderHandler&&this.sliderDom
        &&!this.sliderDom.contains(e.target)){
        let rect = this.sliderHandler.getBoundingClientRect();
        var e = new Event('touchstart');
        e.touches = [{pageX: rect.left+rect.width/2, pageY: rect.top+rect.height/2}];
        this.sliderDom.dispatchEvent(e);
      }
    }
	},

	ready() {
			let self = this;

						/** 实例化滑动组件 */
			let slider = new Slider("#slider-input-"+self.id,{

				tooltip : 'hide',
				reversed : self.reversed,
			});

      let sliderDom = document.querySelector('#slider-'+self.id)
      let sliderHandler=sliderDom.querySelector('.slider-handle')
      this.$set('sliderDom',sliderDom)
      this.$set('sliderHandler',sliderHandler)
      this.sliderBodyTouch=this.sliderBodyTouch.bind(this)
			/** 值改变时触发 */
			slider.on('change', function(val,event) {

				self.change(val,event);
			});

			/** 开始拖动时触发 */
			slider.on('slideStart', function(val,event) {

				self.start(val,event);
			});

			/** 停止拖动时触发 */
			slider.on('slideStop', function(val,event) {

				self.stop(val,event);
			});
			/** 赋予实例化原型对象到Data */
			self.$set('target', slider);

	}
}

</script>
